import React from 'react';
import './searchcontent.css'
import { Link, useParams, useNavigate } from "react-router-dom"
import { getSearch } from "../../api/home"

function Searchcontent() {
    let navigate = useNavigate();//链接跳转
    let [search, SetSearch] = React.useState([])


    // let [searchtop, SetSearchTop] = React.useState(null)
    let [searchdata, SetSearchData] = React.useState(null)
    let [searchsecond, SetSearchSecond] = React.useState(null)

    let [Newsearchtop, SetNewSearchTop] = React.useState([])
    let [Newsearchdata, SetNewSearchData] = React.useState([])
    let [Newsearchsecond, SetNewSearchSecond] = React.useState([])


    let [hotSearch, HotSearch] = React.useState([
        {
            name: "鸡腿"
        },
        {
            name: "土豆"
        },
        {
            name: "青菜"
        },
        {
            name: "猪肉"
        },
        {
            name: "面"
        },
        {
            name: "白菜"
        },
        {
            name: "菜花"
        },
        {
            name: "包子"
        }
    ])

    let [history, Addhistory] = React.useState([])


    let [flag, editFlag] = React.useState(true)
    let [searchValue, SetSearchValue] = React.useState('')
    React.useEffect(() => {
        if(JSON.parse(localStorage.getItem("history"))){
            Addhistory(JSON.parse(localStorage.getItem("history")));

        }else{
            localStorage.setItem('history',JSON.stringify([]))
        }

        if (history.length > 5) {
            history = history.slice(0, 5)
            Addhistory(history)
        }

        // localStorage.setItem("history", JSON.stringify(history))

        // getSearch().then(data => {
        //     SetSearch(data.data)
        //     // 对应数据
        //     SetSearchTop(data.data.top.data)
        //     SetSearchSecond(data.data.second)
        //     SetSearchData(data.data.data)
        // })
    }, [])

    // 清除历史记录
    const clearAll = () => {
        Addhistory([])
        history = []
        localStorage.setItem("history", JSON.stringify(history))

    }

    // 热门搜索跳转
    const gohot = (item) => {
        localStorage.setItem("key", 1)

        navigate('/searchlist/' + item)
        history = history.filter(v => v.name != item)
        Addhistory(history)
        history.unshift({ name: item })
        Addhistory(history)
        localStorage.setItem("history", JSON.stringify(history))

    }

    // 搜索跳转
    const goList = () => {
        // let value = window.encodeURIComponent(searchValue)
        // console.log(value);
        localStorage.setItem("key", 1)

        navigate('/searchlist/' + searchValue)

        history = history.filter(v => v.name != searchValue)
        Addhistory(history)


        history.unshift({ name: searchValue })

        Addhistory(history)
        localStorage.setItem("history", JSON.stringify(history))

    }

    // 搜索提示普通跳转
    const goLists = (value) => {

        localStorage.setItem("key", 1)

        navigate('/searchlist/' + value)
        history = history.filter(v => v.name != value)
        Addhistory(history)
        history.unshift({ name: value })
        Addhistory(history)
        localStorage.setItem("history", JSON.stringify(history))

    }


    // 搜索提示跳转食材
    const goSearch = () => {

        localStorage.setItem("key", 2)
        navigate('/searchlist/' + searchValue)
        history = history.filter(v => v.name != searchValue)
        Addhistory(history)
        history.unshift({ name: searchValue })
        Addhistory(history)
        localStorage.setItem("history", JSON.stringify(history))


    }

    // 搜索提示跳转课程
    const goClass = () => {

        localStorage.setItem("key", 3)
        navigate('/searchlist/' + searchValue)
        history = history.filter(v => v.name != searchsecond.course_name)
        Addhistory(history)
        history.unshift({ name: searchsecond.course_name })
        Addhistory(history)
        localStorage.setItem("history", JSON.stringify(history))


    }
    // 搜索关键字
    const inputChnage = (e) => {
        e.persist()
        SetSearchValue(e.target.value);
        let value = e.target.value
        console.log(e.target.value);

        getSearch(value).then(data => {
            if (value == "") {
                editFlag(true)
            } else {
                editFlag(false)

            }
            // 对应数据
            // SetSearchTop(data.data.top.data)
            SetSearchSecond(data.data.second)
            console.log(data.data.data);
            SetSearchData(data.data.data)
            Newsearchtop = data.data.top.data.filter(v => v.title.indexOf(value) !== -1).map(v => // 把匹配上的关键字加上 css 标签。原生里面 className 会被转成 class， 所以这里直接添加 class。
                v.title.replace(value, "<span class='red'>" + value + "</span>")
            )
            if (data.data.second.course_name.indexOf(value) !== -1) {
                Newsearchsecond = data.data.second.course_name.replace(value, "<span class='red'>" + value + "</span><span class='span'>相关课程<i class='num'>" + data.data.second.total + "</i>个</span>")
            }

            Newsearchdata = data.data.data.filter(v => v.text.indexOf(value) !== -1).map(v => // 把匹配上的关键字加上 css 标签。原生里面 className 会被转成 class， 所以这里直接添加 class。
                v.text.replace(value, "<span class='red'>" + value + "</span>")
            )

            search = "<span class='red'>" + value + "</span><span class='span'>相关食材<i class='num'>" + data.data.top.count + "</i>个</span>"

            SetNewSearchTop(Newsearchtop)
            SetNewSearchSecond(Newsearchsecond)
            SetNewSearchData(Newsearchdata)
            SetSearch(search)



        })


    }
    return (
        <div className='searchcontent'>

            <div className="top">
                <div className="left">
                    <i onClick={() => navigate(-1)} className="iconfont icon-zuobian"></i>
                </div>
                <div className="input">
                    <input type="text" onChange={inputChnage} value={searchValue} placeholder='请输入菜名或者食材搜索' />
                    <i className='iconfont icon-sousuo'></i>
                </div>
                <div className="right">
                    <span onClick={goList}>搜索</span>
                </div>
            </div>

            <div className={`${flag == true ? '' : 'display'}`}>
                <div className='search-history'>
                    <h6>热门搜索</h6>
                    <div className='list'>
                        <ul>
                            {
                                hotSearch.map(item => {
                                    return (
                                        <li onClick={gohot.bind(this, item.name)} key={item.name}>{item.name}</li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                </div>

                <div className='search-history'>
                    <div className='top-history'>
                        <h5>历史搜索</h5>
                        <h5 onClick={clearAll}><i className='icon-shanchu iconfont'></i>清除</h5>
                    </div>
                    <div className='list'>
                        <ul>
                            {
                                history.length == 0 ? (<li className="loading-wrap">暂无搜索历史</li>
                                ) : (<>
                                    {
                                        history.map((item, index) => {
                                            return (
                                                <li key={index}>{item.name}</li>
                                            )
                                        })
                                    }
                                </>)
                            }
                        </ul>

                    </div>
                </div>
            </div>
            <div className={`${flag == true ? 'display' : ''}`}>
                <div className='content'>
                    <ul>
                        {

                            search ? (<li onClick={goSearch} dangerouslySetInnerHTML={{ __html: search }}></li>) : ('')


                            // search.ccount == 0 ? (<li><span className='red'>{searchValue}</span><span className='span'>相关食材<i className='num'>{search.ccount}</i>个</span></li>):("")
                        }

                        {/* {
                            Newsearchtop == 0 ? ("") : (<>
                                {
                                    searchtop && searchtop.map((item, index) => {
                                        return (
                                            <li key={item.id} dangerouslySetInnerHTML={{ __html: Newsearchtop[index] }}>

                                            </li>

                                        )
                                    })
                                }</>)
                        } */}

                        {
                            Newsearchdata == 0 ? ("") : (<>{
                                searchdata && searchdata.map((item, index) => {
                                    return (
                                        <li onClick={goLists.bind(this, item.text)} key={item.id} dangerouslySetInnerHTML={{ __html: Newsearchdata[index] }}></li>


                                    )
                                })
                            }</>)
                        }

                        {
                            Newsearchsecond ? (<li onClick={goClass} dangerouslySetInnerHTML={{ __html: Newsearchsecond }}></li>) : ("")
                        }
                        {searchValue ? (<li onClick={goList}>想要搜索更多关于<span className='red'>{searchValue}</span>的菜,请直接搜索</li>) : ("")

                        }
                    </ul>
                </div>

            </div>

        </div>
    )



}


export default Searchcontent;
